<template>
    <div class="container-exam">
        <div class="title-top">
            <div class="exam-order">{{ current }}.</div>
            <div class="exam-title">{{ examData.title }}</div>
        </div>
        <div class="title-img mt-10" v-if="examData.title_img">
            <van-image class="img-title" fit="cover" position="left" :src="examData.title_img" />
        </div>
        <div class="details-box details-content" v-if="examData.format === '2'">
            <div :class="['details-img-item', 'btn-click', currentSelect === index ? 'active' : '']"
                v-for="(imgItem, index) in examData.details" :key="index" @click="onSelect(index)">
                <van-image class="img-option" fit="cover" position="left" :src="imgItem" />
            </div>
        </div>
        <div class="details-box-text details-content" v-else>
            <div :class="['details-text-item', 'btn-click', currentSelect === index ? 'active' : '']"
                v-for="(option, index) in examData.details" :key="index" @click="onSelect(index)">
                {{ option }}
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue';
const emits = defineEmits(['onSelect'])
const currentSelect = ref<number | null>(null)
const props = defineProps<{
    examData: ProjectType.ExamItemProps
    current: string | number
    currentSelectIndex: number | undefined
}>()
const onSelect = (index: number) => {
    currentSelect.value = index
    setTimeout(() => {
        const targetData = Object.assign({}, props.examData, { currentSelectIndex: index })
        // console.log('after targetData ', targetData);
        emits('onSelect', targetData)
        currentSelect.value = null
    }, 50);
}
watch(() => props.currentSelectIndex, (newVal) => {
    if (newVal !== null || newVal !== undefined) {
        currentSelect.value = newVal as number
    } else {
        currentSelect.value = null
    }
})
</script>

<style lang="scss" scoped>
.container-exam {
    width: 100%;
    height: calc(100vh - 90px);
    padding-top: 20px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;

    .title-top {
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        &>div {
            font-size: 16px;
            line-height: 24px;
            color: $color_text_dark;
            font-weight: bold;
        }

        .exam-order {
            width: 30px;
        }

        .exam-title {
            flex: 1;
            width: 200px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            /* 现代属性，大多数浏览器支持 */
            text-align: justify;
        }
    }

    .title-img {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .details-content {
        flex: 1 !important;
        padding-top: 10px;
        overflow-y: scroll;
    }

    .details-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        &:after {
            content: '';
            width: 30%;
        }

        .details-img-item {
            width: 30%;
            background-color: $color_white;
            display: flex;
            justify-content: center;
            padding: 10px 0;
            margin-bottom: 10px;
            border-radius: 6px;

            .img-option {
                width: 80%;
            }
        }
    }

    .details-box-text {
        width: 100%;
        display: flex;
        flex-direction: column;

        .details-text-item {
            width: 100%;
            line-height: 30px;
            background-color: $color_white;
            border-radius: 6px;
            margin-bottom: 15px;
            color: $color_text_dark;
            box-shadow: 0px 2px 6px 0px rgba(78, 74, 208, 0.1);
            padding: 18px 20px;
            overflow-wrap: break-word;
        }
    }

    .active {
        background-color: $color_bg_answer !important;
        color: $color_primary !important;
    }
}
</style>